<template>
  <d2-container>

    <template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-position="left" :inline="true" label-width="90px" size="mini">

        <el-row>

          <el-col :span="8">
            <el-form-item :label="$t('page-form.form.approval-status')">
              <el-select v-model="mainQuery.handleStatus" clearable @change="fetchMainData">
                <el-option v-for="item in handleStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item :label="$t('page.form.temporalInterval')">
          <el-date-picker v-model="mainQuery.createTimeRange" @change="fetchMainData" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="$t('page.form.startDate')" :end-placeholder="$t('page.form.endTime')"></el-date-picker>
        </el-form-item>

      </el-form>

      <div class="search-btn-box">

        <div class="left">

        </div>
        <div class="right">
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading">{{ $t('page.search-box.reset') }}</el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading">{{ $t('page.search-box.search') }}</el-button>
        </div>
      </div>

    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" :selection-row="mainQuery.allowSelect" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :loading="mainTable.loading" @current-change="onMainCurrentChange" @selection-change="onMainSelectionChange" @handle-set="handleSet" @handle-del="handleDel"></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

  </d2-container>
</template>

<script>

import ApiMain from '@/api/settle.tradeTrans';
import util from '@/libs/util.js';
import i18nTable from "@/mixins/i18n-table";

export default {
  name: 'trade-transfer',
  mixins: [i18nTable
  ],
  data() {
    return {
      handleStatusOptions: [],
      mainQueryRaw: null,
      mainQuery: {
        handleStatus: '',
        type: 2,
        createTimeRange: [],
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: this.$t('page-announcement.d2-crud.empty-data'),
          size: 'mini',
        },
        // indexRow: {
        //   title:this.$t('page.form.serialnumber'),
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          {
            title: "单号", t: "page.form.ordernumber", key: 'transNo', align: 'center', width: '100', showOverflowTooltip: true
          },

          {
            title: "操作金额", t: "page.form.operationamount", key: 'transAmount', align: 'center', width: '100', showOverflowTooltip: true, formatter(row, col, val, index) {
              return row.transCurrency + " " + (val).toFixed(2);
            }
          },
          { title: "操作金额", t: "page.form.transfercurrency", key: 'targetCurrency', align: 'center', width: '100', showOverflowTooltip: true },
          {
            title: "转账金额", t: "page.form.transferamount", key: 'targetAmount', align: 'center', width: '100', showOverflowTooltip: true,
            formatter(row, col, val, index) {
              return row.targetCurrency + " " + (val).toFixed(2);
            }
          },
          { title: "手续费", t: "page.form.servicecharge", key: 'transFee', align: 'center', width: '100', showOverflowTooltip: true },
          {
            title: "状态", t: "page.form.state", key: 'strReReviewStatus', align: 'center', width: '100', showOverflowTooltip: true
          },
          { title: "转账商户邮箱", t: "page.form.transferMerchantEmail", key: 'targetMchEmail', align: 'center', showOverflowTooltip: true },
          { title: "开户行名称", t: "page.form.NameBank", key: 'bankAccountName', align: 'center', showOverflowTooltip: true },
          { title: "开户行行号", t: "page.form.accountnumber", key: 'bankOpenBankNo', align: 'center', showOverflowTooltip: true },
          { title: "开户行卡号", t: "page.form.Openingbanknumber", key: 'bankAccountNo', align: 'center', showOverflowTooltip: true },
          { title: "申请时间", t: "page.form.timeApplication", key: 'createTime', align: 'center', width: '150', showOverflowTooltip: true },
        ],
        rowHandle: {
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        selectionRow: [],
      },
    }
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);

    this.fetchOptions().finally(() => {
      this.resetMainData();
    });
  },
  beforeDestroy() {
  },
  methods: {

    renderMainData(re) {
      console.log('是', re)
      re.list.forEach(item => {
        item.transAmount = item.transAmount / 100
        item.targetAmount = item.targetAmount / 100
        item.transFee = item.transFee / 100
      })
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);

      this.fetchMainData();
    },

    async fetchOptions() {
      var re = await ApiMain.getStepOptions();
      this.handleStatusOptions = re;
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainSelectionChange(now, old) {
      this.mainTable.selectionRow = now
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() {
      this.$refs['dialog-add'].show();
    },

    handleSet({ index, row }) {
      if (row.handleStatus != 1) {
        this.$message({ message: this.$t('page.form.tips'), type: 'error' });
        return false;
      }

      this.$refs['dialog-add'].show(Object.copy(row));
    },

    handleDel({ index, row }) {

      this.$confirm(this.$t('page.form.modifieddata'), this.$t('page.form.hint'), {
        confirmButtonText: this.$t('page.form.confirm'),
        cancelButtonText: this.$t('page.form.cancel'),
        type: 'warning'
      }).then(() => {

        var req = { id: row.id };

        ApiMain.del(req).then(() => {
          this.$message({ message: this.$t('page.form.operatesuccessfully'), type: 'success' });
          this.fetchMainData();
        });

      });
    },

  }
}
</script>

<style>
</style>
